<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #box {
    width: 70vw;
    height: 70vw;
    background: red;
  }
</style>

<body>

</body>
<div id="box"></div>
<script>
  // touchstart 手指触摸
  // touchmove 手指移动
  // touchend 手指抬起
  let box = document.querySelector('#box')

  box.addEventListener('touchstart', () => {
    console.log('touchstart')
  })
  box.addEventListener('touchmove', () => {
    console.log('touchmove')
  })
  box.addEventListener('touchend', () => {
    console.log('touchend')
  })
</script>

</html>